<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<%= BASE_URL %>reset.css">
    <title>首页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        img {
            width: 100%;
            height: 100%;
        }

        /* body {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        } */

        .box {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(102, 204, 204, .49);
        }

        .personal {
            position: relative;
            top: 0;
            width: 80%;
            height: 94%;
            margin: 1.4% auto;
            background-color: rgba(255, 255, 204, 1);
        }

        .personal h1 {
            float: left;
            font-size: 70px;
            margin-left: 10%;
            padding-top: 10%;
            letter-spacing: 35px;
            color: orange;
        }

        .personal .personal_child {
            float: left;
            width: 35%;
            height: 60%;
            position: relative;
            top: 38%;
            left: -450px;
        }

        .personal .personal_bg {
            float: right;
            width: 45%;
            height: 85%;
            background-color: rgba(247, 235, 235, .92);
            position: relative;
            right: 4%;
            top: -50%;
        }

        .personal .personal_basic {
            width: 80%;
            height: 95%;
            background-color: #fff;
            text-align: center;
            position: relative;
            left: 9.8%;
            top: -8.5%;
        }

        .personal .jiazi {
            position: relative;
            top: -7%;
            left: 20%;
            width: 60%;
            height: 10%;
            z-index: 999;
        }

        .personal .personal_head_pic {
            position: relative;
            top: 6%;
            left: 42%;
            width: 17%;
            height: 14%;
            border-radius: 50%;
            background-color: antiquewhite;
        }

        .personal .personal_nick {
            position: relative;
            top: 8%;
            left: 36%;
            width: 22%;
            height: 5%;
            text-align: center;
            border: 1px solid transparent;
            border-bottom: 1px solid black;
            background-color: transparent;
            display: block;
            padding: 0 1em;
            text-decoration: none;
            outline: 0;
        }

        input:focus {
            border-color: #66Afe9 !important;
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, .6);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="personal">
            <!-- 标题 -->
            <h1>个人档案</h1>
            <!-- 图片 -->
            <div class="personal_child">
                <img src="./images/我的_人物.png" alt="">
            </div>
            <!-- 个人档案  -->
            <div class="personal_bg">
                <div class="jiazi"><img src="./images/小夹子.png" alt="小夹子"></div>
                <div class="personal_basic">
                    <!-- 头像 -->
                    <div class="personal_head_pic"></div>
                    <!-- 昵称 -->
                    <input type="text" class="personal_nick"></input>
                    <!-- 账号 -->
                    <div class="">
                        <span>账号:</span>
                        <input type="text" disabled value="17251627162">
                        <button>修改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>